<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <!-- head 中 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

</head>

<body>

    <div id="divNumbers" class="weui-cells">


    </div>
    <div class="weui-cells__title">备注信息</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" id="remark" placeholder="请输入备注内容" rows="3"></textarea>
            </div>
        </div>
    </div>
    <script>
        let formatObj = {
            choiceList: [
                {
                    key: "1",
                    textValue: "语文"
                },
                {
                    key: "2",
                    textValue: "数学"
                },
                {
                    key: "3",
                    textValue: "英语"
                },
                {
                    key: "4",
                    textValue: "物理"
                },
            ],
            btnStep: 10,
            defaultNumber: 100,
            type: "checkbox",
            id: "choiceTemplate",
        };

        let recordValueObj = {
            numberValueMap: [
                {
                    key: "1",
                    value: 120,
                },

                {
                    key: "3",
                    value: 130,
                },
            ],
            remark: "今天玩得真开心,哈哈哈"
        };


        //===================获取放所有选择的div======================
        let divNumbers = document.getElementById("divNumbers");
        //divNumbers.innerHTML = "";

        //==================根据记录值和格式添加元素=====================
        for (let indexList in formatObj.choiceList) {
            //获取该数值项的id,名称,值
            let choice = formatObj.choiceList[indexList];
            let numberKey = choice.key;
            let numberText = choice.textValue;
            let numberValue = formatObj.defaultNumber;
            recordValueObj.numberValueMap.forEach(function (item, index, arr) {
                if (item.key === numberKey) {
                    numberValue = item.value;
                };
            });

            //-----创建列表的列表项
            //创建列表表格div
            let divCell = document.createElement("div");
            divCell.setAttribute("class", "weui-cell");
            //添加内容
            divCell.innerHTML =
                `<div class="weui-cell__bd">
                    <p>`+ numberText + `</p>
                </div>
                <div class="weui-cell__ft">
                    <div class="weui-count">
                        <a      id=`+ "btnMinus" + numberKey + `    class="weui-count__btn weui-count__decrease"></a>
                        <input  id=`+ "input" + numberKey + `   class="weui-count__number" type="number">
                        <a      id=`+ "btnAdd" + numberKey + `   class="weui-count__btn weui-count__increase"></a>
                    </div>
                </div>`;
            divNumbers.appendChild(divCell);

            //获取到输入框,+按钮,-按钮
            //修改本数值项记录值的函数
            let changRecordNumberValue = function (newNumberValue) {
                let valueObj = {
                    key: numberKey,
                    value: newNumberValue,
                };
                recordValueObj.numberValueMap.forEach(function (item, index, arr) {
                    if (item.key === numberKey) {
                        arr.splice(index, 1);
                    };
                });
                recordValueObj.numberValueMap.push(valueObj);
                console.log(recordValueObj.numberValueMap)
            };
            //输入框
            let inputNumber = document.getElementById("input" + numberKey);
            inputNumber.style.width = "12vw";
            inputNumber.value = numberValue;
            inputNumber.onblur = function () { changRecordNumberValue(inputNumber.value); };
            //+按钮
            let btnAdd = document.getElementById("btnAdd" + numberKey);
            console.log(btnAdd);
            btnAdd.onclick = function () {
                let newNumber = parseInt(inputNumber.value) + formatObj.btnStep;
                inputNumber.value = newNumber;
                changRecordNumberValue(newNumber);
            };
            //-按钮
            let btnMinus = document.getElementById("btnMinus" + numberKey);
            console.log(btnAdd);
            btnMinus.onclick = function () {
                let newNumber = parseInt(inputNumber.value) - formatObj.btnStep;
                inputNumber.value = newNumber;
                changRecordNumberValue(newNumber);
            };

        };

        //==================备注信息相关==============================
        let inputRemark = document.getElementById("remark");
        inputRemark.value = recordValueObj.remark;
        inputRemark.onchange = function () {
            recordValueObj.remark = inputRemark.value;
            console.log(recordValueObj);
        };
        //==================提供给安卓的借口:=============================
        window.getJSRecordView = function () {
            return JSON.stringify(recordValueObj);
        };

    </script>



    <!-- body 最后 -->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

    <!-- 如果使用了某些拓展插件还需要额外的JS -->
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>

</body>

</html>